<template>
    <div class="el-select" v-clickoutside="closePanelFun">
        <div class="el-select__tags" @click.stop="showPanelFun">
            <transition-group>
                <el-tag 
                    v-for="item in selected"
                    :key="item" 
                    :closable="true" 
                    size="small" 
                    type="info"
                    @close="deleteTag($event, item)" 
                    disable-transitions>
                    <span class="el-select__tags-text">{{ item }}</span>
                </el-tag>
            </transition-group>
        </div>
        <el-input :placeholder="currentPlaceholder" :disabled="disabled">
            <template slot="suffix">
                <i :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></i>
            </template>
        </el-input>
        <div class="panel-wrap">
            <transition name="el-zoom-in-top">
                <div class="label-pane" v-show="showPanel">
                    <div class="scroll-wrap">
                        <div class="tag-wrap" v-for="(item, index) of keyOpt" :key="'key' + index">
                            <h3 class="tag-title">{{ item.label }}</h3>
                            <el-tag size="small" v-for="tag of item.children" :key="tag.id" @click.stop="addTag(tag)">
                                {{ tag.label }}
                                <i v-if="isSelected(tag.label)" class="el-icon-upload-success el-icon-circle-check"></i>
                            </el-tag>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { queryKeyword } from '@/service/core';
    export default {
        name: 'selectLabel', // 选择标签组件
        props: {
            code: {
                type: String,
                default() {
                    return ''
                }
            },
            value: {
                type: Array,
                default() {
                    return []
                }
            },
            placeholder: {
                type: String,
                default: '请选择标签'
            },
            disabled: {
                type: Boolean,
                default: false            }
        },
        components: {},
        inject: ['elForm'],
        data() {
            return {
                showPanel: false,
                keyOpt: [], // 标签集合
            }
        },
        computed: {
            currentPlaceholder() {
                if(this.selected.length) {
                    return ''
                }else {
                    return this.placeholder;
                }
            },
            iconClass() {
                return this.showPanel ? 'arrow-up is-reverse' : 'arrow-up';
            },
            selected: {
                get: function() {
                    return this.value;
                },
                set: function(val) {
                    this.$emit('input', val)
                }
            },
            inputDisabled() {
                return this.disabled || (this.elForm || {}).disabled;
            },
        },
        created() {
            this.queryKeywordFun();
        },
        methods: {
            queryKeywordFun() { // 查询标签
                let params = {
                    typeId: this.code
                };
                queryKeyword(params).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data) && data.length) {
                            
                            data = data.map(item => {
                                return {
                                    id: item.id,
                                    label: item.label,
                                    value: item.label,
                                    cateId: item.cateId,
                                    cateName: item.cateName,
                                    typeId: item.typeId,
                                    typeName: item.typeName
                                }
                            })
                            let type = data.map(item => item.cateId);
                            type = [...new Set(type)];
                            let arr = [];
                            type.forEach(key => {
                                let index = data.findIndex(v => v.cateId == key);
                                if(index > -1) {
                                    arr.push(
                                        {
                                            label: data[index].cateName,
                                            value: data[index].cateId,
                                            children: data.filter(item => item.cateId == key)
                                        }
                                    )
                                }
                            })
                            this.keyOpt = [...arr];
                        }
                    }
                })
            },
            deleteTag(event, tag) {
                let index = this.selected.indexOf(tag);
                if (index > -1) {
                    this.selected.splice(index, 1);
                }
                event.stopPropagation();
            },
            showPanelFun() {
                if(!this.inputDisabled) {
                    this.showPanel = !this.showPanel;
                }
            },
            closePanelFun() {
                this.showPanel = false;
            },
            handleClearClick() {
                this.selected = [];
            },
            addTag(tag) {
                let index = this.selected.findIndex(v => v == tag.label);
                if(index == -1) {
                    this.selected.push(tag.label);
                }else {
                    this.selected.splice(index, 1);
                }
            },
            isSelected(label) {
                return this.selected.findIndex(item => item == label) > -1;
            },
        }
    }
</script>

<style lang="scss" scoped>
.el-select {
    position: relative;
    vertical-align: middle;
    .el-select__tags {
        width: 100%;
        min-height: 35px;
        line-height: 35px;
        border: 1px solid #DCDFE6;
        border-radius: 3px;
        position: relative;
        z-index: 1;
        transform: none;
        padding: 3px 30px 3px 0;
    }
    /deep/ {
        .el-input {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 0;
        }
        .el-input__inner {
            border: none;
        }
    }
    .panel-wrap {
        position: relative;
        .label-pane {
            height: 240px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            overflow: hidden;

            border: 1px solid #E4E7ED;
            border-radius: 4px;
            background-color: #FFF;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            box-sizing: border-box;
            margin: 5px 0;
            padding: 5px 5px 5px 10px;
            .scroll-wrap {
                height: 100%;
                overflow: scroll;
                .tag-wrap {
                    .tag-title {
                        font-size: 12px;
                        line-height: 28px;
                    }
                    /deep/ .el-tag {
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>